<template>
  <view class="" v-if="data.del != 1">
    <view class="fritem">
      <view class="l">
        <view class="mc">
          <text class="r10" @click="dataedtfn('mc')">{{ data.mc }}</text>
          <u-tag
            v-if="
              data.type == 0 ||
              data.type == 2 ||
              data.type == 5 ||
              data.type == 10
            "
            :text="fruser"
            type="primary"
            mode="dark"
            shape="circle"
            size="mini"
          />
        </view>
        <view class="u-flex pcs" v-if="station0falg">
          {{ fruser }}
          <text style="padding: 0 10rpx">|</text>
          {{ station.pcs }}
        </view>
        <view class="pcs" v-else>
          <text class="r10" @click="USearchfrfn()">{{ station.pcs }}</text>
          <template v-if="mode != 0">
            <u-tag
              :text="modaxs"
              type="primary"
              mode="dark"
              shape="circle"
              size="mini"
              @click="dataedtfn('mode')"
            />
            <text class="r10"></text>
          </template>
          <u-tag
            v-if="!disabled && StatFrfalgfn"
            text="删除"
            type="error"
            mode="dark"
            shape="circle"
            size="mini"
            @click="StatFredtplfn()"
          />
        </view>
      </view>
      <view class="r" @click="dataedtfn(statfrper)">
        {{
          item.mode == "2_2"
            ? `${data[statfrper] / 100}元/度`
            : `${data[statfrper]}%`
        }}
      </view>
    </view>
    <u-modal
      :show="modalshow"
      :show-cancel-button="true"
      :show-title="false"
      @confirm="confirm"
      @cancel="cancel"
    >
      <view class="modalinput">
        <u-input
          :focus="true"
          :placeholder="placeholder"
          v-model="modalvalue"
        />
      </view>
    </u-modal>
    <zmodal ref="zmodal"></zmodal>
    <u-select
      :mask-close-able="false"
      v-model="modeshow"
      :defaultValue="modedefaultValue"
      :list="options"
      @confirm="modeconfirm"
    ></u-select>
  </view>
</template>
<script>
  export default {
    props: {
      station0falg: {
        typeof: Boolean,
        default: false,
      },
      item: {
        typeof: [Object, String, Number],
        default: () => {
          return {};
        },
      },
      usearchs: {
        typeof: [Object, String, Number],
        default: () => {
          return [];
        },
      },
      mode: {
        typeof: [String, Number],
        default: () => {
          return "";
        },
      },
      i: {
        typeof: [String, Number],
        default: () => {
          return "";
        },
      },
      statfrper: {
        typeof: [String, Number],
        default: () => {
          return "per";
        },
      },
      station: {
        typeof: [Object, String, Number],
        default: () => {
          return {};
        },
      },
      statfr: {
        typeof: [Object, String, Number],
        default: () => {
          return [];
        },
      },
      disabled: {
        typeof: Boolean,
        default: false,
      },
    },
    data() {
      return {
        modeshow: false,
        modalshow: false,
        placeholder: "",
        modalvalue: "",
        options: [
          {
            value: "1",
            label: "电费分润",
          },
          {
            value: "2",
            label: "服务费分润",
          },
          {
            value: "2_2",
            label: "服务费分润固定金额",
          },
          {
            value: "3",
            label: "卡分润",
          },
        ],
        typepfrids: {
          0: "代理商",
          2: "物业",
          5: "自定义",
          8: "一级分润方",
          9: "二级分润方",
        },
        data: {},
        edtlx: "",
      };
    },
    watch: {
      item: {
        handler(newVal, oldVal) {
          let data = this.$u.deepClone(newVal);
          if (!data.mode) {
            data.mode = "0";
          }
          this.data = data;
        },
        deep: true,
        immediate: true,
      },
    },

    computed: {
      modedefaultValue() {
        let optioni = this.options.findIndex((e) => {
          return e.value == this.data.mode;
        });
        if (optioni == -1) {
          return;
        }
        return [Number(optioni)];
      },
      modaxs() {
        let options = [
          {
            value: "0",
            label: "普通分润",
          },
          {
            value: "1",
            label: "电费分润",
          },
          {
            value: "2",
            label: "服务费分润",
          },
          {
            value: "2_2",
            label: "服务费分润固定金额",
          },
          {
            value: "3",
            label: "卡分润",
          },
        ];
        let r = options.find((e) => {
          return e.value == this.data.mode;
        });
        return r ? r.label : this.data.mode;
      },
      StatFrfalgfn() {
        if (this.item.frid.indexOf("new") >= 0) {
          return true;
        }
        if (this.item["type"] == "1") {
          return false;
        }
        return true;
      },
      fruser() {
        let p = this.item;
        if (p.pfrid == 0) {
          let dquUser = this.usearchs.find(function (e) {
            return e.frid == p.frid;
          });
          if (dquUser) {
            let mc = dquUser.uUser;
            if (dquUser.uxm) {
              mc += "_" + dquUser.uxm;
            }
            return mc;
          }

          return this.typepfrids[p.type]
            ? "新" + this.typepfrids[p.type]
            : "新代理商";
        }

        let dquUser = this.usearchs.find(function (e) {
          return e.frid == p.pfrid;
        });
        console.log(dquUser, "111111", this.usearchs);
        if (dquUser) {
          let mc = dquUser.uUser;
          if (dquUser.uxm) {
            mc += "_" + dquUser.uxm;
          }
          return mc;
        } else {
          return "";
        }
      },
    },
    methods: {
      async StatFredtplfn() {
        let USearchfr = await this.$z.request("/USearchfr", {
          frid: this.item.frid,
        });
        if (USearchfr.length == 1) {
          this.$refs.zmodal.init({
            content: "请删除用户后，再删除分润！！",
          });
          return;
        }
        // 请确认是否删除
        this.$refs.zmodal.init({
          showcancel: true,
          content: "请确认是否删除?",
          confirm: () => {
            let statfr = this.$u.deepClone(this.statfr);
            if (this.data.frid.indexOf("new") >= 0) {
              statfr.splice(this.i, 1);
            } else {
              statfr[this.i] = {
                ...this.data,
                del: "1",
                per: "0",
              };
            }
            this.$emit("itemchange", statfr);
          },
        });
      },
      sybfb(data = this.statfr) {
        let r = 100;
        data = this.$u.deepClone(data);
        data = data.filter((e) => {
          return e.model != "2_2";
        });
        data.forEach((e) => {
          if (e.del != 1) {
            if (isNaN(parseFloat(e.per))) {
              e.per = 0;
            }
            r = Number(r).subtr(Number(e.per));
          }
        });
        return r;
      },
      async USearchfrfn() {
        if (this.disabled || !this.StatFrfalgfn) {
          return;
        }
        let types = {
          0: "0",
          1: "0",
          2: "11",
          5: "12",
        };
        let type = types[this.item["type"]];
        let USearchfr = await this.$z.request("/USearchfr", {
          frid: this.item.frid,
        });
        let str = USearchfr.length == 0 ? "马上添加用户?" : "修改用户?";
        let p = this.$u.$parent.call(this, "StatFrecharts");
        this.$refs.zmodal.init({
          showcancel: true,
          content: str,
          confirm: () => {
            let url = "";
            if (USearchfr.length == 0) {
              url = `/pages/USearch/uadd?pcs=${p.query.id}&frid=${this.item.frid}&utype=${type}`;
            } else {
              url = `/pages/USearch/USearch?pcs=${p.query.id}&frid=${this.item.frid}&utype=${type}&uUser=${USearchfr[0].uUser}`;
            }
            this.$z.gopage(url);
          },
        });
      },
      dataedtfn(lx) {
        if (this.disabled || !this.StatFrfalgfn) {
          return;
        }
        this.edtlx = lx;
        if (lx == "mc") {
          this.placeholder = this.data.mc;
          this.modalvalue = "";
          this.modalshow = true;
        } else if (lx == "per") {
          if (this.item.mode == "2_2") {
            this.placeholder = `设置分润金额单位元.`;
            this.modalvalue = "";
            this.modalshow = true;
            return;
          }
          let sybfb = this.sybfb(
            this.statfr.filter((e) => {
              if (e.frid == this.item.frid) {
                return false;
              }
              return e.mode == this.item.mode;
            })
          );

          this.placeholder = `${this.data.per}%,可设置百分比为${sybfb}%.`;
          this.modalvalue = "";
          this.modalshow = true;
        } else if (lx == "mode") {
          this.modeshow = true;
        }
      },
      modeconfirm(e) {
        let statfr = this.$u.deepClone(this.statfr);
        this.data["mode"] = e[0].value;
        statfr[this.i] = this.data;
        this.$emit("itemchange", statfr);
      },
      cancel() {
        this.modalshow = false;
      },
      confirm() {
        this.modalshow = false;
        if (this.modalvalue == "") {
          return;
        }
        if (this.edtlx == "mc") {
          let statfr = this.$u.deepClone(this.statfr);
          this.data[this.edtlx] = this.modalvalue;
          statfr[this.i] = this.data;
          this.$emit("itemchange", statfr);
        } else if (this.edtlx == "per") {
          let statfr = this.$u.deepClone(this.statfr);
          if (this.item.mode == "2_2") {
            let v = parseInt(Number(this.modalvalue) * 100);

            this.data[this.edtlx] = v;
            statfr[this.i] = this.data;
          } else {
            if (this.modalvalue < 0 || this.modalvalue > 100) {
              this.$u.toast("百分百在0到100之间");
              return;
            }
            this.data[this.edtlx] = this.modalvalue;
            statfr[this.i] = this.data;
            let pernum = this.sybfb(
              statfr.filter((e) => {
                return e.mode == this.data.mode;
              })
            );

            // 自动分配pernum
            if (pernum != 0) {
              statfr.forEach((e) => {
                if (e.frid == this.data.frid || e.type == 1 || e.type == 10) {
                  return;
                }
                if (Number(pernum) == 0) {
                  return;
                }
                if (e.mode == this.data.mode) {
                  let per = Number(e.per) + Number(pernum);
                  if (per < 0) {
                    per = 0;
                  }
                  pernum = Number(pernum) + (Number(e.per) - per);

                  e.per = String(per);
                }
              });
              this.$u.toast("已自动分配剩余百分比");
            }
          }

          this.$emit("itemchange", statfr);
        }
      },
    },
  };
</script>
<style lang="scss">
  .r10 {
    padding-right: 12rpx;
  }

  .flex1 {
    width: 0;
    flex: 1;
  }

  .modalinput {
    padding: 20rpx;
  }

  .fritem {
    position: relative;
    padding: 22rpx 30rpx;
    display: flex;
    align-items: center;

    .l {
      width: 0;
      flex: 1;

      .mc {
        line-height: 50rpx;
        display: flex;
        align-items: center;
      }

      .pcs {
        line-height: 50rpx;
        display: flex;
        align-items: center;
        color: #8f8f94;
      }
    }

    .r {
      font-size: 40rpx;
      font-weight: bold;
      color: #2093f5;
    }

    &::after {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 15px;
      height: 1px;
      content: "";
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      background-color: #eeeeee;
    }
  }
</style>
